<template>
	<div class="exam">
		<div class="title">{{ examinationName }}</div>
		<div class="audio">
			听力音频：
			<audio-player
				ref="audio"
				style="flex: 1"
				:fileurl="audioUrl"
				:banClick="false"
			></audio-player>
		</div>
		<div class="content">
			<div class="comment">
				<div class="profile" :style="`background:url(${userIcon});background-size:100%`"></div>
				<input type="text" v-model="msg" placeholder="请输入评论..." />
				<div class="send" @click="send">
					<el-button type="success">发表评论</el-button>
				</div>
			</div>
			<div class="comment-list" v-show="commentList.length != 0">
				<div class="comment" v-for="item in commentList" :key="item.id">
					<div
						class="profile"
						:style="`background:url(${$baseUrl + item.avatarUrl});background-size:100% 100%`"
					></div>
					<div class="detail">
						<div>用户名：{{ item.nickName }}</div>
						<div>评论：{{ item.msg }}</div>
						<div>发表时间：{{ item.createdTime }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="leave" @click="$router.go(-1)">
				<el-button type="primary">返回上一页</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import { getComment, setComment } from '@/api/user';
	import AudioPlayer from '@/components/AudioPlayer';

	export default {
		components: {
			AudioPlayer,
		},
		data() {
			return {
				examinationName: '',
				audioUrl: '',
				sectionDetail: [],
				audioUrl: '',
				originalUrl: '',
				isDown: '',
				id: '',
				examinationId: '',
				examTime: 0,
				isShowPdf: false,
				achievement: 0,
				commentList: [],
				msg: '',
			};
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo || {};
			},
			userName() {
				return this.userInfo.nickName;
			},
		},
		created() {
			this.getExamInfo();
			this.getComment();
		},
		computed: {
			userIcon() {
				if (this.$store.getters.userInfo && this.$store.getters.userInfo.avatarUrl) {
					return this.$baseUrl + this.$store.getters.userInfo.avatarUrl;
				}
			},
		},
		methods: {
			getExamInfo() {
				let { examinationName, isDown, originalUrl, audioUrl, id, examinationId, examTime } =
					this.$route.query;
				this.examTime = examTime;
				this.examinationName = examinationName;
				this.audioUrl = this.$baseUrl + audioUrl;
				this.originalUrl = this.$baseUrl + originalUrl;
				this.isDown = isDown;
				this.id = id;
				this.examinationId = examinationId;
			},
			async getComment() {
				let params = {
					id: this.examinationId ? this.examinationId : this.id,
					currPage: 1,
					pageSize: 999,
				};
				let res = await getComment(params);
				this.commentList = res.data.data.list.reverse();
			},
			async send() {
				let params = {
					id: this.examinationId ? this.examinationId : this.id,
					msg: this.msg,
				};
				let res = await setComment(params);
				this.$modal.msgSuccess(res.data.msg);
				this.msg = '';
				this.getComment();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.exam {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 0 30px;
		.title {
			margin: 0 auto;
			margin-top: 20px;
			width: 35%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 24px;
			font-weight: 500;
			color: #000;
		}

		.audio {
			display: flex;
			align-items: center;
			font-size: 24px;
			font-weight: 500;
			width: 70%;
			margin: 15px auto;
		}
		.content {
			width: 70%;
			margin: 0 auto;
			font-size: 20px;
			font-weight: 500;
			.comment {
				margin-top: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 80px;
				/* border: solid 2px #000; */
				box-shadow: 0 0 5px 1px #999;
				.profile {
					margin: 0 20px;
					width: 50px;
					height: 50px;
					border-radius: 50%;
					border: solid 2px #999;
				}
				input {
					height: 40px;
					flex: 1;
					margin: 20px 0;
					padding: 0 10px;
					border: solid 2px #999;
					border-radius: 4px;
				}
				.send {
					cursor: pointer;
					padding: 0 10px;
					margin: 0 20px;
					width: 80px;
					height: 40px;
					line-height: 40px;
					text-align: center;
					/* border: solid 2px #000; */
					.el-button--success {
						height: 44px;
						margin-top: -3px;
						line-height: 22px;
					}
				}
			}
			.comment-list {
				margin-top: 10px;
				/* border: solid 2px #000; */
				box-shadow: 0 0 5px 1px #999;
				padding: 20px;
				.comment {
					height: 100px;
					.detail {
						flex: 1;
						display: flex;
						flex-direction: column;
						& > div {
							flex: 1;
							margin: 5px 0;
						}
					}
				}
			}
		}
		.footer {
			margin-top: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			.leave {
				width: 100px;
				padding: 20px;
				font-size: 20px;
				font-weight: 500;
				/* border: 2px solid #000; */
				text-align: center;
				margin: 5px;
			}
		}
	}
	.exam ::v-deep .el-radio__input.is-checked .el-radio__inner {
		border-color: #56bf8b;
		background: #56bf8b;
	}
	.exam ::v-deep .el-radio__input.is-checked + .el-radio__label {
		color: #56bf8b;
	}
</style>
